<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>享购网</title>
    <link rel="shortcut icon" href="/favicon.ico">
    <link rel="stylesheet" href="/libs/swiper/css/swiper.min.css">
    <link rel="stylesheet" href="/libs/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/index.css">
   
    
</head>
<body>
    <!-- header -->
   <div class="header clear-fix"></div>
   <!-- 轮播图 -->
   <div class="swiper-container banner clear-fix">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="/images/banner/banner1.jpg" alt=""></div>
            <div class="swiper-slide"><img src="/images/banner/banner2.jpg" alt=""></div>
            <div class="swiper-slide"><img src="/images/banner/banner3.jpg" alt=""></div>
            <div class="swiper-slide"><img src="/images/banner/banner4.jpg" alt=""></div>
        </div>
        <div class="swiper-pagination"></div>
        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
        
        
          
        </div>
    </div>
    <div class="shopList container clear-fix">
        <div class="shopArea-head shophead ">
            <span class="s-t a-t">数码家电</span>
            <div class="more">
                <a href="#">more></a>
            </div>     
        </div>
        <div class="shop-bg bg-y"></div>
        <div class="shop-list clear-fix">
            <div class="shop-left">
                <div class="floor-banner">
                    <img src="/images/daily-left.jpg" alt="">
                    <ul class="shop-navbox a-t">
                        <li>手机</li>
                        <li>鼠标</li>
                        <li>耳机</li>
                        <li>数据线</li>
                        <li>其他</li>
                    </ul>
                </div>
            </div>
            <div class="shop-right" id="categoryList">
                <!-- 本地JSON数据渲染 -->
                
                <script type="text/html" id="categoryListTemplate">
                {{each list item}}
                    <div class="shop-product" >
                        <a href="/html/shoplist.html?id=12">
                            <img src="{{item.src}}" alt="">
                        </a>
                        <p class="shop-t">{{item.title}}</p>
                        <p class="shop-p"> {{item.price}}</p>
                    </div>
                {{/each}}
                </script>
            </div>
        </div>  
        <!-- healthy food -->
        <div class="shopArea-head shophead">
            <span class="s-t heath-t">少女搭配</span>
            <div class="more">
                <a href="#">more></a>
            </div>     
        </div>
        <div class="shop-bg bg-g"></div>
        <div class="shop-list clear-fix">
            <div class="shop-left">
                <div class="floor-banner">
                    <img src="/images/daily-health.jpg" alt="">
                    <ul class="shop-navbox heath-t">
                        <li>衬衫</li>
                        <li>外套</li>
                        <li>牛仔</li>
                        <li>套装</li>
                    </ul>
                </div>
            </div>
            <div class="shop-right" id="foodCategory">
                <script type="text/html" id="foodCategoryTemplate">
                {{each list food}}
                    <div class="shop-product">
                        <a href="/html/shoplist.html?id=2">
                            <img src="{{food.src}}" alt="">
                        </a>
                        <p class="shop-t">{{food.title}}</p>
                        
                        <p class="shop-p">￥{{food.price}} </p>
                    </div>
                {{/each}}
                </script>
            </div>
            
        </div>
           <!-- baby -->    
           <div class="shopArea-head shophead">
            <span class="s-t baby-t">母婴用品</span>
            <div class="more">
                <a href="#">more></a>
            </div>     
        </div>
        <div class="shop-bg bg-p"></div>
        <div class="shop-list">
            <div class="shop-left">
                <div class="floor-banner">
                    <img src="/images/daily-baby.jpg" alt="">
                    <ul class="shop-navbox baby-t">
                        <li>出行</li>
                        <li>护理</li>
                        <li>玩具</li>
                        <li>用品</li>
                        <li>箱包</li>
                    </ul>
                </div>
            </div>
            <div class="shop-right" id="babyCategory">
               
            </div>
            <script type="text/html" id="babyCategoryTemplate">
                {{each list baby}}
                    <div class="shop-product">
                        <a href="/html/shoplist.html?id=24">
                            <img src="{{baby.src}}" alt="">
                        </a>
                        <p class="shop-t">{{baby.title}}</p>
                        
                        <p class="shop-p">￥{{baby.price}} </p>
                    </div>
                {{/each}}
                </script>
        </div>   

    </div>
    <div class="shopCar"></div>
    <div class="footer"></div>
    
    <script src="/libs/require/require.min.js " data-main="/js/index"></script>
</body>
</html>